<template>
    <div class="search_box">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="分类名称">
                <el-input placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item v-for="(item, index) in selectModel" :key="index" :label="item.label">
                <el-select
                    v-model="item.value"
                    class="m-2"
                    :placeholder="item.placeholder"
                    clearable
                >
                    <el-option
                        v-for="items in item.option"
                        :key="items.value"
                        :label="items.label"
                        :value="items.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    v-for="(btn, index) in buttonModel"
                    :key="index"
                    @click="navButton(btn.text)"
                >
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="btn.icon"></use>
                    </svg>
                    {{ btn.text }}
                </el-button>
            </el-form-item>
        </el-form>
        <el-dialog
            v-model="centerDialogVisible"
            :title="dialogTitle"
            width="32%"
            align-center
            center
        >
            <el-form ref="formRef" :model="numberValidateForm" class="demo-ruleForm">
                <el-form-item
                    v-show="dialogTitle !== '设置推荐值'"
                    label="分类名称："
                    prop="name"
                    :rules="[
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 1, max: 10, message: '至少输入1-10个字数', trigger: 'blur' },
                    ]"
                >
                    <el-input
                        v-model="numberValidateForm.name"
                        maxlength="10"
                        placeholder="请输入分类名称"
                    />
                </el-form-item>
                <!-- <el-form-item
                    v-show="dialogTitle !== '设置推荐值'"
                    label="所属站点："
                    prop="owningSite"
                    :rules="[
                        {
                            required: true,
                            message: '请选择所属站点',
                            trigger: 'change',
                        },
                    ]"
                >
                    <el-select v-model="numberValidateForm.owningSite" placeholder="请选择所属站点">
                        <el-option label="交易" value="交易" />
                        <el-option label="工商" value="工商" />
                        <el-option label="法律" value="法律" />
                        <el-option label="知产" value="知产" />
                        <el-option label="综合" value="综合" />
                    </el-select>
                </el-form-item> -->
                <el-form-item
                    label="分类排序："
                    prop="sort"
                    :rules="[{ required: true, message: '请输入分类排序' }]"
                >
                    <el-input
                        v-model.number="numberValidateForm.sort"
                        type="text"
                        placeholder="排序值越大，内容展示越靠前，最大输入9999"
                        maxlength="4"
                        oninput="value=value.replace(/[^\d]/g,'')"
                        autocomplete="off"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(formRef)"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import type { FormInstance } from "element-plus";
const props = defineProps(["dialogTitle", "dialogEdit"]);
const emits = defineEmits(["dialogEmit"]);
const centerDialogVisible = ref(false);
const selectModel = reactive([
    {
        label: "所属站点",
        value: "",
        placeholder: "请选择所属站点",
        option: [
            {
                value: "交易",
                label: "交易",
            },
            {
                value: "工商",
                label: "工商",
            },
            {
                value: "法律",
                label: "法律",
            },
            {
                value: "知产",
                label: "知产",
            },
            {
                value: "综合",
                label: "综合",
            },
        ],
    },
    {
        label: "分类状态",
        value: "",
        placeholder: "请选择分类状态",
        option: [
            {
                value: "开启状态",
                label: "开启状态",
            },
            {
                value: "关闭状态",
                label: "关闭状态",
            },
        ],
    },
]);
const buttonModel = reactive([
    {
        icon: "#icon-sousuo3",
        text: "查询",
    },
    {
        icon: "#icon-a-6gengxin",
        text: "重置",
    },
    {
        icon: "#icon-plus_x",
        text: "新增分类",
    },
]);
const dialogTitle = ref("");
watch(props.dialogTitle, (newVlaue) => {
    centerDialogVisible.value = newVlaue.visible;
    if (newVlaue.title !== "") {
        dialogTitle.value = newVlaue.title;
    }
});
watch(centerDialogVisible, (newVlaue) => {
    emits("dialogEmit", { visible: newVlaue, title: dialogTitle.value });
});
watch(props.dialogEdit, (newValue) => {
    numberValidateForm.name = newValue.name;
    numberValidateForm.owningSite = newValue.owningSite;
    numberValidateForm.sort = newValue.sort;
});
const navButton = (t: string) => {
    const condition: any = new Map([
        ["查询", () => {}],
        ["重置", () => {}],
        [
            "新增分类",
            () => {
                centerDialogVisible.value = true;
                dialogTitle.value = "新增分类";
            },
        ],
    ]);
    condition.get(t)();
};
const formRef = ref<FormInstance>();

const numberValidateForm = reactive({
    name: "",
    sort: "",
    owningSite: "",
});

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            ElMessage({
                message: "操作成功",
                type: "success",
            });
            centerDialogVisible.value = false;
        } else {
            console.log("error submit!");
            return false;
        }
    });
};
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    margin-right: 4px;
}

.inner_icon {
    fill: #4d70ff;
    margin-right: 2px;
}

.inner_icon:hover {
    fill: #2d56fa;
}

.new-article-btn {
    margin-left: 15px !important;
}

.dialog-footer {
    button:last-child {
        margin-left: 20px;
    }
}
</style>
